<template>
  <div>
    <el-dialog title="品牌详细" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-row :gutter="24">
            <el-col :span="12" :offset="0">
              品牌名称
              <el-input
                style="width: 300px; margin-left: 10px"
                v-model="form.name"
                placeholder="请输入品牌名"
              ></el-input
            ></el-col>
            <el-col :span="12" :offset="0">
              英首字母
              <el-input
                style="width: 300px; margin-left: 10px"
                v-model="form.firstLetter"
                placeholder="请输入首字母"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="24">
            <el-col :span="12" :offset="0">
              品牌排序
              <el-input
                style="width: 300px; margin-left: 10px"
                v-model="form.sort"
                placeholder="请输入排序"
              ></el-input
            ></el-col>
            <el-col :span="12" :offset="0">
              <span>产品数量</span>
              <el-input
                style="width: 300px; margin-left: 10px"
                v-model="form.productCount"
                placeholder="请输入产品数量"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="24">
            <el-col :span="6" :offset="0">
              <span>是否显示</span
              ><el-switch
                style="margin-left: 10px"
                v-model="form.showStatus"
                active-color="#13ce66"
                inactive-color="#DCDFE6"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-col>
            <el-col :span="6" :offset="0">
              是否为品牌制造商
              <el-switch
                style="margin-left: 10px"
                v-model="form.factoryStatus"
                active-color="#13ce66"
                inactive-color="#DCDFE6"
                :active-value="1"
                :inactive-value="0"
              ></el-switch
            ></el-col>
            <el-col :span="12" :offset="0">
              <span>品牌故事</span>
              <el-input
                style="width: 300px; margin-left: 10px"
                v-model="form.brandStory"
                placeholder="请输入产品故事"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="24">
            <el-col :span="12" :offset="0">
              上传专区大图
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9528/lejuAdmin/material/uploadFileOss"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="form.bigPic" :src="form.bigPic" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="12" :offset="0">
              上传LOGO
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9528/lejuAdmin/material/uploadFileOss"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleAvatarSuccess1"
              >
                <img v-if="form.logo" :src="form.logo" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button v-if="isShow" type="primary" @click="onSubmit"
            >确认</el-button
          >
          <el-button v-else type="primary" @click="onSave">更新</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/myAuth";
import brandApi from "@/api/goods/brand";
export default {
  components: {},

  data() {
    return {
      isShow: true,
      dialogTableVisible: false,
      imageUrl: "",
      imageUrl1: "",
      form: {
        bigPic: "",
        brandStory: "",
        factoryStatus: false,
        firstLetter: "",
        id: "",
        logo: "",
        name: "",
        productCommentCount: 0,
        productCount: 0,
        showStatus: true,
        sort: 0,
      },
    };
  },

  created() {},

  mounted() {},

  methods: {
    cancel() {
      this.dialogTableVisible = !this.dialogTableVisible;
    },
    // 更新保存
    onSave() {
      brandApi.updateBrand(this.form).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.dialogTableVisible = !this.dialogTableVisible;
          this.$emit("send-father", true);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 提交新增
    onSubmit() {
      brandApi.addBrand(this.form).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.dialogTableVisible = !this.dialogTableVisible;
          this.$emit("send-father", true);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleAvatarSuccess(e) {
      console.log(e);
      this.imageUrl = e.data.fileUrl;
      this.form.bigPic = e.data.fileUrl;
    },
    handleAvatarSuccess1(e) {
      console.log(e);
      this.imageUrl1 = e.data.fileUrl;
      this.form.logo = e.data.fileUrl;
    },
    change(item) {
      this.dialogTableVisible = !this.dialogTableVisible;
      console.log(item);

      if (item.id) {
        this.form = item;
        this.isShow = false;
      }
    },
    change1() {
      this.dialogTableVisible = !this.dialogTableVisible;
      this.form = {
        bigPic: "",
        brandStory: "",
        factoryStatus: false,
        firstLetter: "",
        id: "",
        logo: "",
        name: "",
        productCommentCount: 0,
        productCount: 0,
        showStatus: true,
        sort: 0,
      };
      this.isShow = true;
    },
  },

  computed: {
    headers() {
      const token = getToken();
      return { token };
    },
  },

  watch: {},
};
</script>

<style scoped lang='scss'>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>